{extend name="base" /}
{block name="style"}
<link rel="stylesheet" href="/assets/swiper/swiper.min.css">
<style>
    .main{padding:0; padding-bottom: 60px; }
    .project-desc{ padding:30px 0; }
    .project-desc p{ margin: 0; line-height: 28px; font-size: 15px;}
    .project-name{ font-size: 24px; font-weight: bold;margin-bottom: 0; text-align: center }

    .swiper-container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        background-size: cover;
        background-position: center;
    }

    .gallery-top {
        height: 80%;
        width: 100%;
    }

    .gallery-thumbs-wrap {
        width: 100%;
        position: relative;
    }

    .gallery-thumbs {
        box-sizing: border-box;
        padding: 30px 0;
        width: 95%;
    }
    .swiper-button-prev.swiper-button {
        background-image: url(/assets/img/arrow-left.png);
        float: left;
        width: 2%;
        left:-1%;
    }
    .swiper-button-next.swiper-button {
        background-image: url(/assets/img/arrow-right.png);
        float: right;
        width: 2%;
        right:-1%;
    }
    .gallery-thumbs .swiper-slide {
        height: 100%;
    }
    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
        border: 4px solid #5155FF
    }
    .main-title>div {
        padding: 0;
    }
    .swiper-button-prev.swiper-button-white {
        background-image: url(/assets/img/left.png)
    }
    .swiper-button-next.swiper-button-white {
        background-image: url(/assets/img/right.png)
    }
    .swiper-button-white {
        background-size: 50px 50px;
        width: 80px;
        height: 50px;
        margin-top: -25px;
    }
    .swiper-button {
        background-size: 26px auto;
    }

    @media (max-width: 767px) {
        .main {
            padding : 30px 0;
        }
        .swiper-button-next,
        .swiper-button-prev {
            background-size: 34px 34px;
            width: 60px;
            height: 34px;
            margin-top: -17px;
        }
        .gallery-thumbs-wrap {
            display: none;
        }
    }

    @media (min-width: 768px) {
        /*.main {*/
        /*padding-bottom: 50px;*/
        /*}*/
    }

    @media (min-width: 992px) {

    }

    @media (min-width: 1200px) {


    }
    .project-desc{ padding:30px 15px; }
</style>
{/block}
{block name="content"}
<section id="banner">
    <div class="banner-box">
        <img src="/assets/img/banner.png" >
    </div>
    <div class="detail detail-path hidden-xs">
        <div class="container">
            <div class="detail-home">
                <a href="/">
                    <img src="/assets/img/home.png" />
                </a>
                <a href="javascript:void(0)" id="main-title">案例欣赏</a>
            </div>
        </div>
    </div>
</section>

<section class="main">
    <div class="container wrap">
        <div class="row">
            <div class="col-xs-12">
                <div class="row project-desc">
                    <h3 class="project-name">{$xmdj.name}</h3>
                    <!--<p class="text-center">({$xmdj.author})</p>-->
                    {$xmdj.desc}
                </div>
                <div class="swiper-container gallery-top">
                    <div class="swiper-wrapper">
                        {volist name="$xmdj.imgs" id="vo"}
                        <div class="swiper-slide" style="background-image:url({$vo.img})"></div>
                        {/volist}
                    </div>
                    <div id="playImgBth" class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>

                <div class="gallery-thumbs-wrap">
                    <div class="swiper-container gallery-thumbs">
                        <div class="swiper-wrapper">
                            {volist name="$xmdj.imgs" id="vo"}
                            <div class="swiper-slide" style="background-image:url({$vo.img})"></div>
                            {/volist}
                        </div>
                    </div>
                    <div class="swiper-button-next swiper-button"></div>
                    <div class="swiper-button-prev swiper-button"></div>
                </div>

            </div>
        </div>
    </div>
</section>
{/block}
{block name="script"}
<!-- Swiper JS -->
<script src="/assets/swiper/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
    setHeight();

    var timer = setInterval(function () {
        document.getElementById('playImgBth').click();
    }, 4000)

    window.onresize = setHeight;
    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        loop: true,
        loopedSlides: 6, //looped slides should be the same
        navigation: {
            nextEl: '.swiper-button-next.swiper-button-white',
            prevEl: '.swiper-button-prev.swiper-button-white'
        }
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        slidesPerView: 6,
        touchRatio: 0.2,
        loop: true,
        loopedSlides: 6, //looped slides should be the same
        slideToClickedSlide: true,
        navigation: {
            nextEl: '.swiper-button-next.swiper-button',
            prevEl: '.swiper-button-prev.swiper-button'
        }
    });
    galleryTop.controller.control = galleryThumbs;
    galleryThumbs.controller.control = galleryTop;

    function setHeight() {
        var width = document.getElementsByClassName('wrap')[0].offsetWidth;
        document.getElementsByClassName('gallery-top')[0].style.height = width * (439 / 1133) + 'px';
        document.getElementsByClassName('gallery-thumbs')[0]
            .getElementsByClassName('swiper-wrapper')[0]
            .style.height = width / 6 * (189 / 376) + 'px';
    }
</script>
{/block}